<template>
  <div class="home">
    <h1>{{count}}</h1>
    <!-- <h1>{{this.$store.state.count}}</h1> -->
    <!-- <button @click="add(2)">++</button> -->
    <button @click="jiaA(2)">++</button>
    <!-- <button @click="dec(6)">--</button> -->
    <button @click="jianM(6)">--</button>
    <!-- <h3>{{this.$store.getters.mul}}</h3> -->
    <h3>{{mul}}</h3>
    <hr />
    <!-- <h1>{{this.$store.state.name}}</h1> -->
    <!-- <h1>{{getName}}</h1> -->
    <h1>{{name}}</h1>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters,
    mapActions,
    mapMutations
  } from 'vuex'
  export default {
    mounted() {
      // console.log(this);
      /*
       {abc: ƒ}
       abc: ƒ mappedState()
      */
      // console.log(mapState({abc:'bwf'}))
      // console.log(mapState({count:'count',abc:'bwf'}))
    },
    data() {
      return {
        // count: 0
      }
    },
    computed: {
      ...mapState(['count', 'name']),
      ...mapGetters(['mul'])
    },
    methods: {
      // add() {
      //   this.$store.dispatch('jiaA', 2);
      // },
      /*
        通过mapActions生成方法,调用actions中的方法(对象方式)
        属性名:要生成的方法名
        属性值:要调用的actions中的方法名
      */
      // ...mapActions({add:'jiaA'}),
      ...mapActions(['jiaA']),
      /* dec() {
        this.$store.commit('jianM', 6);
      } */
      // ...mapMutations({dec: 'jianM'})
      ...mapMutations(['jianM'])
    }
  }
</script>
